<template>
    <page>
        <step :value="1"></step>
        <m-group>
            <m-cell label="当前选择专车类型:">网约车 <span slot="right" class="c2" v-back>重&nbsp;&nbsp;&nbsp;&nbsp;选</span>
            </m-cell>
        </m-group>
        <m-group>
            <m-cell label="手机号" is-link v-if="isEmpty(userInfo.mobile)" :link="{name: 'phoneBind'}">
                <span slot="right" class="text3">点击绑定手机</span>
            </m-cell>
            <m-cell label="手机号" v-else>{{userInfo.mobile}} <span slot="right" class="c3">已验证</span></m-cell>
            <m-cell label="所在城市" is-link @click.native="showCity = true"><span></span>{{form.city}} </m-cell>
            <m-cell label="车牌号" is-link @click.native="licencePlateShow = true">{{form.carCode}}</m-cell>
        </m-group>

        <div class="f12 px12">
            <p class="c7 mt12" v-if="form.carTypeId == 4">*只需要输入6位车牌号，第7位默认为学</p>
            <p class="c7 mt12">*手机号和车牌号严格保密，仅用于油站核对专车身份的真实性</p>
        </div>

        <m-group v-if="form.carTypeId == 4">
            <m-input label="公司" placeholder="请输入驾校名称" v-model="form.companyName"></m-input>
        </m-group>

        <m-button class="mx12 mt60" @click.native="submit">下一步</m-button>

        <!-- 车牌输入键盘 begin-->
        <licence-plate :show.sync="licencePlateShow" v-model="form.carCode"></licence-plate>
        <!-- 车牌输入键盘 end-->

        <!-- 城市选择器 begin -->
        <select-city v-model="form.city" :show.sync="showCity"></select-city>
        <!-- 城市选择器 end-->
    </page>
</template>
<script>
  import licencePlate from '@/components/licencePlate'
  import selectCity from '@/components/form/popupSelect/city'
  import step from './_step.vue'
  import checker, { required, phone } from '@/utils/checker'
  import { closePop } from '@/utils/tiny'

  export default {
    data () {
      const {carTypeId} = this.$route.query
      const {carCode} = this.$store.getters.userInfo
      return {
        licencePlateShow: false,
        showCity: false,
        form: {
          carTypeId,
          carCode,
          city: '',
          companyName: ''
        }
      }
    },
    computed: {
      userInfo () {
        return this.$store.getters.userInfo
      }
    },
    methods: {
      submit () {
        const form = this.form
        const checkerPhone = [this.userInfo.mobile, phone('请绑定手机')]
        const checkerAddress = [form.city, required('请填写所在城市')]
        const checkerCarCode = [form.carCode, required('请填写车牌号')]
        const checkercompanyName = form.carTypeId == 4 ? [form.companyName, required('请填写公司名称')] : null
        if (!checker(checkerPhone, checkerAddress, checkerCarCode, checkercompanyName)) return
        this.$router.push({name: 'specialCar_step3', params: form})
      },
      closePop () {
        return closePop(this, 'licencePlateShow', 'showCity')
      }
    },
    beforeRouteLeave (to, from, next) {
      next(this.closePop())
    },
    components: {step, licencePlate, selectCity}
  }
</script>
<style type="text/scss" lang="scss" scoped>

</style>
